<!DOCTYPE html>
<!--
# Copyright (c) 2012-2021 Contributors to the Eclipse Foundation
# 
# See the NOTICE file(s) distributed with this work for additional
# information regarding copyright ownership.
# 
# This program and the accompanying materials are made available under the
# terms of the Eclipse Public License 2.0 which is available at
# http://www.eclipse.org/legal/epl-2.0
# 
# SPDX-License-Identifier: EPL-2.0
#
-->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>MQTT Client</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <link href="css/bootstrap.min.css" rel="stylesheet">
		<style type="text/css">
			#outerContainer {
				height: 100%;
				padding: 5px;
			}
			.container > hr {
				margin: 30px 0;
			}
			.accordion-group {
				background-color: white;
				border-color: black;
				box-shadow: 2px 2px 2px #888;
			}
			#header {
				border: 1px solid black;
				background-color: #333;
				background-image: -webkit-linear-gradient(#3E3E3E, #131313);
				height: 26px;
				color: white;
				font-size: 1.2em;
				padding-top: 5px;
				text-align: center;
			}
			#productName {
				font-size: 0.7em;
				margin: -1px 0 0 10px;
			}
			#title {
				font-size: 1.1em;
			}
			.accordion-toggle {
				font-size: 1.2em;
				line-height: 30px;
				font-weight: bold;
			}
			.alert {
				display: none;
				margin-bottom: 4px;
				box-shadow: 2px 2px 2px #888;
				border: solid 1px black
			}
		</style>
  </head>

  <body style="background-image: url(css/images/wide_blue_thatch.png); background-repeat: repeat;">
		<div id="header">
			<center><span id="title">MQTT Client</span></center>
		</div>


    <div id="outerContainer">

	<div id="connectedAlert" class="alert alert-success" style="display: none; margin-bottom: 4px;">
		Connected to <span id="connectedAlertServer"></span><span id="connectedAlertPort"></span>
	</div>

	<div id="errorAlert" class="alert alert-error" style="display: none; margin-bottom: 4px;">
		<span id="errorAlertText"></span>
	</div>

	<div class="accordion" id="accordion">
		<div class="accordion-group">
			<div class="accordion-heading">
				<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#connect">
					Connect
				</a>
			</div>
			<div id="connect" class="accordion-body collapse in">
				<div class="accordion-inner">
					<div class="input-prepend">
						<span class="add-on" style="width: 50px;">Server</span>
						<input class="requiresDisconnect" id="connectServer" style="width: 200px;" type="text" value="messagesight.demos.ibm.com">
					</div>
					<div class="input-prepend">
						<span class="add-on" style="width: 50px;">Port</span>
						<input class="requiresDisconnect" id="connectPort" style="width: 200px;" type="text" value="1883">
					</div>
					<button style="margin-top: 5px;" id="connectButton" class="requiresDisconnect btn btn-success btn-small">Connect</button>
					<button style="margin-top: 5px;" id="disconnectButton" class="requiresConnect btn btn-danger btn-small">Disconnect</button>
					<hr>
					<div class="input-prepend">
						<span class="add-on" style="width: 70px;">Client ID</span>
						<input class="requiresDisconnect" id="connectClientID" style="width: 180px;" type="text" value="">
					</div>
					<div class="input-prepend">
						<span class="add-on" style="width: 70px;">Username</span>
						<input class="requiresDisconnect" id="connectUsername" style="width: 180px;" type="text" placeholder="(optional)">
					</div>
					<div class="input-prepend">
						<span class="add-on" style="width: 70px;">Password</span>
						<input class="requiresDisconnect" id="connectPassword" style="width: 180px;" type="password" placeholder="(optional)">
					</div>
					<div class="input-prepend">
						<span class="add-on" style="width: 100px;">Clean Session</span>
						<div class="btn-group" data-toggle="buttons-radio">
							<button type="button" id="connectCleanSessionOff" class="requiresDisconnect btn">OFF</button>
							<button type="button" id="connectCleanSessionOn" class="requiresDisconnect btn active">ON</button>
						</div>
					</div>
					<div class="input-prepend">
						<span class="add-on" style="width: 100px;">SSL</span>
						<div class="btn-group" data-toggle="buttons-radio">
							<button type="button" id="connectSSLOff" class="requiresDisconnect btn active">OFF</button>
							<button type="button" id="connectSSLOn" class="requiresDisconnect btn">ON</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="accordion-group">
			<div class="accordion-heading">
				<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#publish">
					Publish
				</a>
			</div>
			<div id="publish" class="accordion-body collapse">
				<div class="accordion-inner">
					<div class="input-prepend">
						<span class="add-on" style="width: 70px;">Topic</span>
						<input class="requiresConnect" id="publishTopic" style="width: 190px;" type="text" value="planets/earth">
					</div>
					<div class="input-prepend">
						<span class="add-on" style="width: 70px;">Message</span>
						<input class="requiresConnect" id="publishMessage" style="width: 190px;" type="text" value="Hello world!">
					</div>
					<div class="input-prepend">
						<span class="add-on" style="width: 70px;">QOS</span>
						<select class="requiresConnect" style="width: 60px" id="publishQOS">
							<option>0</option>
							<option>1</option>
							<option>2</option>
						</select>
					</div>
					<div class="input-prepend">
						<span class="add-on" style="width: 70px;">Retained</span>
						<div class="btn-group" data-toggle="buttons-radio">
							<button type="button" id="publishRetainedOff" class="requiresConnect btn active">OFF</button>
							<button type="button" id="publishRetainedOn" class="requiresConnect btn">ON</button>
						</div>
					</div>
					<button style="margin-top: 5px;" id="publishButton" class="requiresConnect btn btn-success btn-small">Publish</button>
				</div>
			</div>
		</div>
		<div class="accordion-group">
			<div class="accordion-heading">
				<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#subscribe">
					Subscribe
				</a>
			</div>
			<div id="subscribe" class="accordion-body collapse">
				<div class="accordion-inner">
					<div class="input-prepend">
						<span class="add-on" style="width: 60px;">Topic</span>
						<input class="requiresConnect" id="subscribeTopic" style="width: 190px;" type="text" value="planets/earth">
					</div>
					<div class="input-prepend">
						<span class="add-on" style="width: 60px;">QOS</span>
						<select class="requiresConnect" style="width: 60px" id="subscribeQOS">
							<option>0</option>
							<option>1</option>
							<option>2</option>
						</select>
					</div>
					<button style="margin-top: 5px; margin-bottom: 5px;" id="subscribeButton" class="requiresConnect btn btn-success btn-small">Subscribe</button>
					<div id="subscribeList"></div>
				</div>
			</div>
		</div>
		<div class="accordion-group">
			<div class="accordion-heading">
				<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#log">
					Log<span style="margin-left: 10px; padding: 2px 5px" class="badge badge-info" id="logSize"></span>
				</a>
			</div>
			<div id="log" class="accordion-body collapse">
				<div style="padding: 5px" class="accordion-inner">
					<pre style="line-height: 14px; font-size: 11px; margin-bottom: 0;" class="pre-scrollable" id="logContents"></pre>
				</div>
			</div>
		</div>
	</div>

    <!-- Placed at the end of the document so the pages load faster -->
	<script src="js/utils/jquery.min.js"></script>
	<script src="js/utils/bootstrap.min.js"></script>
	<script src="js/utils/mqttws31.js"></script>
	<script src="js/MQTTClient.js"></script>

  </body>
</html>

